<!-- <p-button label="{{'Back'|translate}}" (onClick)="goback()"  iconPos="left" icon="fa fa-arrow-left"></p-button> -->
<style type="text/css">
.cli_ul li{
	float:left;	
}
.ui-widget-header{
  background-color: #F0F7FF!important;
}

.ui-table-responsive{
	height:800px;
	
	
}
.kuang{
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
	border-radius: 16px;
	width:90%; margin:0 auto;
	min-height:600px;
	margin-bottom: 50px;
}
</style>
<div class="cl_po bg_bai" style="top:48%;left: 5%;width: 90%;">
            <div class="f_tou radius"><img src="/assets/images/shu3.png" alt="">{{'My Sales Records'|translate}}</div>
            <ul class="cli_ul">
                <li class="lan col-xs-6 col-sm-6 col-md-6">{{totalCommisionUnit}}<span>{{'Total Commission Unit'|translate}}</span></li>
                <li class="hong col-xs-6 col-sm-6 col-md-6">${{totalCommission}}<span>{{'Total Commission'|translate}}</span></li>
            </ul>
</div>
<div style=" width:100%; height:16rem">

</div>
<div  class="kuang">

<p-table #dt [columns]="selectedColumns" [value]="records" [responsive]="true" [paginator]="true" [rows]="10">
    <ng-template pTemplate="caption">
        <div class="row">
            <div class="col">
                <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected"
                    [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>
            </div>
            <div class="col">
                <div style="text-align: right">

                    <input type="text" pInputText size="20" placeholder="{{'Global Filter'|translate}}" (input)="dt.filterGlobal($event.target.value, 'contains')"
                        style="width:auto">
                    <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
            <!-- <th></th> -->
        </tr>
        <!-- <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <p-multiSelect *ngSwitchCase="'sale_status'" [options]="optionStatus" (onChange)="dt.filter($event.value, col.field, 'in')"></p-multiSelect>
            </th>
        </tr> -->

    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns" [ngSwitch]="col.field">
                <span *ngSwitchCase = "'lot'">
                    <a href="javascript:void(0)" (click)="onViewRow(rowData)">{{rowData[col.field]}}</a>
                </span>
                <span *ngSwitchDefault>
                        {{rowData[col.field]}}
                </span>
               
            </td>
            <!-- <td>
                <button type="button" class="btn btn-warning btn-sm" (click)="onViewRow(rowData)">View</button>
            </td> -->
        </tr>


    </ng-template>
</p-table>
</div>
